<!-- 添加咨询师 -->
<template>
  <section class="add">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules" size="small">
      <el-form-item label="姓名" prop="teacherName">
        <el-input v-model="form.teacherName"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="cardId">
        <el-input v-model="form.cardId"></el-input>
      </el-form-item>
      <el-form-item label="工作单位" prop="institute">
        <el-input v-model="form.institute"></el-input>
      </el-form-item>
      <el-form-item label="擅长" prop="profession">
        <el-input v-model="form.profession"></el-input>
      </el-form-item>
      <el-form-item label="资质" prop="type">
        <el-input v-model="form.type"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio v-model="form.sex" label="男">男</el-radio>
        <el-radio v-model="form.sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="form.tel"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="form.pwd"></el-input>
      </el-form-item>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-upload
            class="upload-demo"
            action="/api/upload/qualification"
            :on-success="handleUploadSuccess1">
            <el-button size="mini" type="primary">点击上传个人照片</el-button>
          </el-upload>
          <div v-if="photo!== ''" style="margin-top: 10px">
            <img :src="photo" alt="" style="width: 100px;height: 100px">
          </div>
        </el-col>
        <el-col :span="12">
          <el-upload
            class="upload-demo"
            action="/api/upload/qualification"
            :on-success="handleUploadSuccess">
            <el-button size="mini" type="primary">点击上传资质</el-button>
          </el-upload>
          <div v-if="documents!== ''" style="margin-top: 10px">
            <img :src="documents" alt="" style="width: 100px;height: 100px">
          </div>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()" size="small">立即创建</el-button>
        <el-button type="text" @click="cancel()" size="small">取消</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  export default {
    data () {
      let checkTel = ( rule , value , callback ) => {
        this.$axios ({
          url: '/api/checkTel',
          method: 'get',
          params: {
            tel:this.form.tel
          }
        }).then(({data}) => {
          if (data) {
            callback()
          } else {
            callback(new Error('手机号已存在'))
          }
        })
      }
      return {
        form : { //表单数据初始化
          studentName : null ,
          grade : null ,
          major : null ,
          clazz : null ,
          institute : null ,
          tel : null ,
          email : null ,
          pwd : null ,
          cardId : null ,
          sex : null ,
          role : 1
        } ,
        // 表单校验
        rules : {
          teacherName : [
            { required : true , message : "姓名不能为空" , trigger : "blur" }
          ] ,
          cardId : [
            { required : true , message : "身份证号不能为空" , trigger : "blur" }
          ] ,
          institute : [
            { required : true , message : "工作单位不能为空" , trigger : "blur" }
          ] ,
          profession : [
            { required : true , message : "擅长不能为空" , trigger : "blur" }
          ] ,
          type : [
            { required : true , message : "资质不能为空" , trigger : "blur" }
          ] ,
          pwd : [
            { required : true , message : "用户密码不能为空" , trigger : "blur" } ,
            { min : 5 , max : 20 , message : '用户密码长度必须介于 5 和 20 之间' , trigger : 'blur' }
          ] ,
          tel : [
            {
              pattern : /^1[3|4|5|6|7|8|9][0-9]\d{8}$/ ,
              message : "请输入正确的手机号码" ,
              trigger : "blur" ,
              required : true
            },
            { validator: checkTel }
          ] ,
          email : [
            {
              type : "email" ,
              message : "请输入正确的邮箱地址" ,
              trigger : ["blur" , "change"] ,
              required : true
            }
          ] ,
        } ,
        fileList : [] ,
        documents : '' ,
        photo : ''
      };
    } ,
    methods : {
      onSubmit () { //数据提交
        this.$refs[ "form" ].validate ( valid => {
          if ( valid ) {
            this.$axios ( {
              url : '/api/teacher' ,
              method : 'post' ,
              data : {
                ... this.form
              }
            } ).then ( res => {
              if ( res.data.code == 200 ) {
                this.$message ( {
                  message : '数据添加成功' ,
                  type : 'success'
                } )
                this.$router.push ( { path : '/teacherManage' } )
              }
            } )
          }
        } )

      } ,
      cancel () { //取消按钮
        this.$refs.form.resetFields ()
      } ,
      beforeRemove ( file , fileList ) {
        return this.$confirm ( `确定移除 ${ file.name }？` );
      } ,

      handleUploadSuccess ( res ) {
        this.documents = '/api' + res.data
        this.form.documents = res.data
        this.$message ( {
          message : res.message ,
          type : 'success'
        } )
      } ,
      handleUploadSuccess1 ( res ) {
        this.photo = '/api' + res.data
        this.form.photo = res.data
        this.$message ( {
          message : res.message ,
          type : 'success'
        } )

      } ,

    }
  };
</script>
<style lang="scss" scoped>
  .add {
    padding: 0px 40px;
    width: 400px;
  }
</style>

